<html lang="en">
<head>
<title>huangliusong</title>
<script src="./vue.js"></script>
</head>
 <style type="text/css">
 	.v-enter,.v-leave-to{
 		opacity: 0;
 	}
 	.v-enter-active,.v-leave-active{
 		transition: opacity 1s;
 	}
 </style>
<body>
	<div id="root">
		<transition-group>
			<div v-for="(item,index) of list" :key="item.id">
				{{item.title}}
			</div>
		</transition-group>
		<button @click="handleBtnClick">add</button>
	</div>

	<script type="text/javascript">
	var count=0;
	var vm=new Vue({
		el:"#root",
		data:{
			list:[]
		},
		methods:{
			handleBtnClick:function(){
				this.list.push({
					id:count++,	
					title:'huangliusong'+count
				})
			}
		}
	})
	</script>
</body>

</html>